<template>
	<view style="background-color: #F1F2F4;height: 100%;" class="posit-relat">
		<view class="posit-absol width-all" style="z-index: 1;">
		  <image class="width-all" style="height: 50vh;"  mode="scaleToFill" src="https://app.gluz.com.cn/uniappAssets/static/images/customer/top.png"></image>
		</view>
		<u-navbar :title="$t('意向设置')" title-color="#fff" :background="{'background-color':'rgba(255,255,255,0)'}"  back-icon-color="#fff" leftIcon="back" @leftClick="backEvent" ></u-navbar> 
		<view class="posit-absol padd-0_15 flex flex-col flex-item-shrink-0" style="background-color: #F1F2F4;min-height: 100vh;height: auto;">
			<view class="width-all reward_detail padd-0_20 flex-item-shrink-0  z-index-10" style="margin-top: 65rpx;">
				<view class="font-12" style="color: #4988FD;padding: 90rpx 0;">{{$t('感谢大家一直以来的努力，按时到岗的你们让团队更加出色！继续保持这样好的作风，共同为我们的目标努力吧！')}}</view>
			</view>
			<view style="margin-top: 60rpx;" class="z-index-10">
				<view class="bg-color-fff padd-t-15 padd-b-10 padd-0_15 marg-b-15 border-radius-16">
					<u-form :model="dateForm" ref="dateForm" :label-position="lang=='zh'?'left':'top'" label-width="200" class="u-form-child-r-text-right">
						<view class="">
							<view class="flex flex-both width-all">
								<view  class="font-12" style="margin-bottom: 16rpx;">{{$t('接单时间(最少2小时)')}}</view>
								<u-switch size="28" v-model="switchChecked"  :loading="switchLoading" active-color="#30F998" inactive-color="#ddd"></u-switch>
							</view>
							<view class="flex flex-middle">
								<view class="reward_base" style="">
									<image class="width-all height-all" mode="scaleToFill" src="/static/images/center/clock.png"></image>
								</view>
								<view class="font-12 flex flex-middle width-all" style="color: #1D1D1D;font-weight: 400;margin-left: 8rpx;" v-if="lang=='ru'">
									<u-input type="select" style="width: 30%;text-align: center !important;" v-model="dateForm.startime_name"  :custom-style="myStyles"	class="no-icon"  :placeholder="$t('请选择')" :select-open="starTime_show" @click="starTime_show=true" />	
									<view style="width: 30%; text-align: center;">-</view>
									<u-input type="select" style="width: 30%;text-align: center !important;" v-model="dateForm.endtime_name"  :custom-style="myStyles"	class="no-icon"  :placeholder="$t('请选择')" :select-open="endTime_show" @click="endTime_show=true" />
								</view>
								<view class="font-12 flex flex-middle width-all" style="color: #1D1D1D;font-weight: 400;margin-left: 8rpx;" v-if="lang=='zh'">
									<view class="" @click="starTime_show=true">{{dateForm.startime_name}}</view>
									<view style="width:10%; text-align: center;">-</view>
									<view class="" @click="endTime_show=true">{{dateForm.endtime_name}}</view>
								</view>
								<u-select v-model="starTime_show" :list="timeOptions"  @confirm="timeChange('starTime_show',$event,'startime_value','startime_name')"></u-select>
								<u-select v-model="endTime_show" :list="timeOptions"  @confirm="timeChange('endTime_show',$event,'endtime_value','endtime_name')"></u-select>
							</view>
						</view>
						<u-form-item :label="$t('可接语言种类')"  prop="language_value" >
							<u-input type="select" v-model="dateForm.language_name"  :custom-style="myStyle"	class="no-icon"  :placeholder="$t('请选择语言种类')" :select-open="language_show" @click="language_show=true" />	
							<u-icon name="arrow-down" color="#BEBEBE" size="28"  v-slot="right"></u-icon>
							<u-popup v-model="language_show" mode="bottom" z-index-10 :closeable="false" height="1000">
								<view>
									<xiaolu-tree ref="languageType" :isAll="''"  :checkList="language_checkedArr" :treeNone="languageList" @sendValue="fun_treeChange('language',$event)" :props="language_props" :isCheck="true" :searchIf="false" v-if="languageList.length>0"></xiaolu-tree>
								</view>
							</u-popup>
						</u-form-item>
						<u-form-item :label="$t('擅长类型')" prop="meeting_value" >
							<u-input type="select" v-model="dateForm.meeting_name" :custom-style="myStyle"  class="no-icon" :placeholder="$t('请选择会议类型')"  @click="meeting_show=true" />
							<u-icon name="arrow-down" color="#BEBEBE" size="28" v-slot="right"></u-icon>
							<u-popup v-model="meeting_show" mode="bottom" z-index-10 :closeable="false" height="1000">
								<view>
									<xiaolu-tree ref="meetingType" :isAll="''" label-name="name" value-name="id" :checkList="meeting_checkedArr" :treeNone="meetingList" @sendValue="fun_treeChange('meeting',$event)" :props="meeting_props" :isCheck="true" :searchIf="false" v-if="meetingList.length>0"></xiaolu-tree>
								</view>
							</u-popup>
						</u-form-item>
						<u-form-item :label="$t('专业方向')" prop="fessional_value" >
							<u-input type="select" v-model="dateForm.fessional_name"  :custom-style="myStyle"   class="no-icon" :placeholder="$t('请选择专业方向')" :select-open="fessional_show" @click="fessional_show=true"  />
							<u-icon name="arrow-down" color="#BEBEBE" size="28" v-slot="right"></u-icon>
							<u-popup v-model="fessional_show" mode="bottom" z-index-10 :closeable="false" height="1000">
								<view>
									<xiaolu-tree ref="fessionalType" :isAll="''" label-name="name" value-name="id" :checkList="fessional_checkedArr" :treeNone="fessionalList" @sendValue="fun_treeChange('fessional',$event)" :props="meeting_props" :isCheck="true" :searchIf="false" v-if="fessionalList.length>0"></xiaolu-tree>
								</view>
							</u-popup>
						</u-form-item>
						<u-form-item :label="$t('当前所在区域')" prop="city_value" >
							<u-input type="select" v-model="dateForm.city_name"  :custom-style="myStyle"  class="no-icon" :placeholder="$t('请选择所在区域')"  :select-open="city_show" @click="city_show=true"  />
							<u-icon name="arrow-down" color="#BEBEBE" size="28" v-slot="right"></u-icon>
							<SelectCity :is_port="is_port" :is_register="is_register" v-model="city_show" @change="confirm" :select_city_new="select_city_new" :select_city_newd="select_city_newd"></SelectCity>
						</u-form-item>
						<u-form-item :label="$t('接单范围')" prop="order_takingValue" >
							<u-input type="select" v-model="dateForm.order_taking"  :custom-style="myStyle"  class="no-icon" :placeholder="$t('请选择接单积分')"  :select-open="order_show" @click="order_show=true"  />
							<u-select v-model="order_show" :list="orderOptions"  @confirm="timeChange('order_show',$event,'order_takingValue','order_taking')"></u-select>
						</u-form-item>
						<u-form-item :label="$t('添加银行卡')" prop="bank_value" >
							<u-input type="number" v-model="dateForm.bank_value"  :custom-style="myStyleNone"  class="no-icon" :placeholder="$t('银行卡卡号')" />
						</u-form-item>
						<u-form-item :label="$t('银行名称')" prop="bank_build">
							<u-input  v-model="dateForm.bank_build"  :custom-style="myStyleNone"  class="no-icon" :placeholder="$t('银行名称')" />
						</u-form-item>
						<u-form-item :label="$t('开户行')" prop="bank_city">
							<u-input  v-model="dateForm.bank_city"  :custom-style="myStyleNone"  class="no-icon" :placeholder="$t('开户行')" />
						</u-form-item>
						
					</u-form>

				</view>
			<view class="flex flex-around" style="margin-top: 30rpx;">
				<u-button v-if="lang=='zh'" hover-class="none"  shape="circle" class="font-14 subbox" style="width: 80%;height: 90rpx;" :loading="submit_loading" :disabled="submit_loading" @click="fun_submit()">{{$t('提交')}}</u-button>
				<u-button v-if="lang=='ru'" hover-class="none"  shape="circle" class="font-14 subbox" style="width: 80%;height: 90rpx;" :loading="submit_loading" :disabled="submit_loading" @click="fun_submit()">Отправить</u-button>
			</view>
			
			</view>
		</view>
		
	</view>
</template>

<script>
import xiaoluTree from '@/components/xiaolu-tree/tree.vue';
import SelectCity from "@/components/page/SelectCityNew.vue"
export default {
	components:{
		xiaoluTree,
		SelectCity
	},
		data() {
			return {
				select_city_new:[],
				select_city_newd:[],
				is_port:true,
				is_register:0,
				dateForm: {
					startime_name:'',
					startime_value:null,
					endtime_name:'',
					endtime_value:null,
					language_name:'',
					language_value:'',
					meeting_name:'',
					meeting_value:'',
					fessional_name:'',
					fessional_value:'',
					city_name:'',
					city_value:'',
					order_taking:'',
					order_takingValue:'',
					bank_value:'',
					bank_build:'',
					bank_city:'',
					
				},
				//语言
				lang: getApp().globalData.lang,
				starTime_show:false,
				endTime_show:false,
				order_show:false,
				switchLoading:false,
				switchChecked:true,
				controlStatus: false,
				orderOptions:[
					{label:20+' '+this.$t('积分/分钟'),value:20},
					{label:40+' '+this.$t('积分/分钟'),value:40},
					{label:60+' '+this.$t('积分/分钟'),value:60},
					{label:80+' '+this.$t('积分/分钟'),value:80},
					{label:100+' '+this.$t('积分/分钟'),value:100},
				],
				timeOptions:[
					{label:'0:00',value:0},
					{label:'1:00',value:1},
					{label:'2:00',value:2},
					{label:'3:00',value:3},
					{label:'4:00',value:4},
					{label:'5:00',value:5},
					{label:'6:00',value:6},
					{label:'7:00',value:7},
					{label:'8:00',value:8},
					{label:'9:00',value:9},
					{label:'10:00',value:10},
					{label:'11:00',value:11},
					{label:'12:00',value:12},
					{label:'13:00',value:13},
					{label:'14:00',value:14},
					{label:'15:00',value:15},
					{label:'16:00',value:16},
					{label:'17:00',value:17},
					{label:'18:00',value:18},
					{label:'19:00',value:19},
					{label:'20:00',value:20},
					{label:'21:00',value:21},
					{label:'22:00',value:22},
					{label:'23:00',value:23}
				],
				myStyle: {
					textAlign:getApp().globalData.lang=='ru'?'left':'',
					pointerEvents: "none"
				},
				myStyleNone: {
					textAlign:getApp().globalData.lang=='ru'?'left':'',
					pointerEvents: "auto"
				},
				myStyles:{
					textAlign:"center",
					pointerEvents: "none"
				},
				clockType_show:false,
				submit_loading:false,
				language_show:false,
				city_show:false,
				languageList:[
					{label:this.$t('中文'),value:this.$t('中文'),id:0,user:true,children:[]},
					{label:this.$t('俄文'),value:this.$t('俄文'),id:1,user:true,children:[]},
					{label:this.$t('英语'),value:this.$t('英语'),id:2,user:true,children:[]}
				],
				language_checkedArr:[],
				language_props:{
					label: 'label',
					children: 'children',
					multiple:true,
					nodes:false,
					hasPath:false
				},
				meeting_show:false,
				meetingList:[],
				meeting_checkedArr:[],
				meeting_props:{
					label: 'name',
					children: 'children',
					multiple:true,
					nodes:false,
					hasPath:false
				},
				fessional_show:false,
				fessionalList:[],
				fessional_checkedArr:[],
				fessional_props:{
					label: 'value',
					children: 'children',
					multiple:true,
					nodes:false,
					hasPath:false
				},
				
			}
		},
		onLoad() {
			this.meetingFunction() //会议类型
			this.fessionalFunction() //专业类型
			this.intention_update() //意向设置回显
		},
		onShow() {

		},
		methods: {
			change(status) {
				console.log('change',status);
			},
			//返回
			backEvent() {
				uni.navigateBack({
					delta: 1
				})
			},
			//提交
			fun_submit(){
				this.submit_loading=true;
				setTimeout(()=>{
					this.submit_loading=false;
				},1000)
				if(this.dateForm.startime_value==null&&this.dateForm.endtime_value==null){
					uni.showModal({
							content: this.$t('请选择接单时间'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				if(this.dateForm.startime_value!==null){
					if(this.dateForm.endtime_value==null){
					uni.showModal({
							content: this.$t('接单时间不满足2小时'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				    }
				}
				if(this.dateForm.endtime_value!==null){
					if(this.dateForm.startime_value==null){
					uni.showModal({
							content: this.$t('接单时间不满足2小时'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				    }
				}
				//if(this.dateForm.startime_value&&this.dateForm.endtime_value){
					if(this.dateForm.endtime_value == this.dateForm.startime_value){
						uni.showModal({
								content: this.$t('接单时间不满足2小时'),
								showCancel: false,
								confirmText: this.$t('确定'),
							})
							return false
					}
					if(this.dateForm.endtime_value < this.dateForm.startime_value){
						if((this.dateForm.endtime_value - this.dateForm.startime_value)<2){
							if((this.dateForm.endtime_value-this.dateForm.startime_value) > 0 ){
									uni.showModal({
											content: this.$t('接单时间不满足2小时'),
											showCancel: false,
											confirmText: this.$t('确定'),
										})
										return false
							}
							if((this.dateForm.endtime_value-this.dateForm.startime_value) <0 && (this.dateForm.endtime_value-this.dateForm.startime_value+24) < 2){						  
								  	uni.showModal({
								  			content: this.$t('接单时间不满足2小时'),
								  			showCancel: false,
								  			confirmText: this.$t('确定'),
								  		})
								  		return  false
							}
						}
					}
					
					if(this.dateForm.endtime_value > this.dateForm.startime_value){
						if((this.dateForm.endtime_value - this.dateForm.startime_value)<2){
							uni.showModal({
									content: this.$t('接单时间不满足2小时'),
									showCancel: false,
									confirmText: this.$t('确定'),
								})
								return false
						}
					}
				//}
				if(this.dateForm.fessional_value==''){
					uni.showModal({
							content: this.$t('请选择专业方向'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				if(this.dateForm.order_takingValue==''){
					uni.showModal({
							content: this.$t('请选择接单积分'),
							showCancel: false,
							confirmText: this.$t('确定'),
						})
						return false
				}
				let paramsDate={
					online_start_hour:this.dateForm.startime_value,
					online_end_hour:this.dateForm.endtime_value,
					request_lang:this.dateForm.language_value,
					city_id:this.dateForm.city_value,
					meeting_ids:this.dateForm.meeting_value,
					professional_ids:this.dateForm.fessional_value,
					bank_number:this.dateForm.bank_value,
					bank_build:this.dateForm.bank_build,
					bank_city:this.dateForm.bank_city,
					intention_score:this.dateForm.order_takingValue,
					status:this.switchChecked==true?'1':'0'
					
				}
				this.$u.api.user.intention_save(paramsDate).then(async (res) => {
					//保存修改
					uni.showToast({
						mask: true,
						icon:'success',
						title:this.$t('确认成功')
					})
					setTimeout(()=>{
						this.intention_update()
					},1000)
				})
			},
			//回显信息
			intention_update(){
				this.$u.api.user.intention_query().then(async (res) => {
					console.log('回显信息',res)
					this.dateForm.startime_name=res.online_start_hour!=null?(res.online_start_hour+':00'):this.$t('请选择')
					this.dateForm.startime_value=res.online_start_hour!=null?res.online_start_hour:null
					this.dateForm.endtime_name=res.online_end_hour!=null?(res.online_end_hour+':00'):this.$t('请选择')
					this.dateForm.endtime_value=res.online_end_hour!=null?res.online_end_hour:null
					if(this.lang=='zh')this.dateForm.language_name=res.request_lang
					if(this.lang=='ru')this.dateForm.language_name=res.request_lang_ru
					this.dateForm.language_value=res.request_lang
					let request_langArry=res.request_lang?this.dateForm.language_value.split(','):[]
					this.language_checkedArr=this.languageList.filter(item => request_langArry.indexOf(item.value) > -1)
					if(this.lang=='zh')this.dateForm.meeting_name=res.meeting
					if(this.lang=='ru')this.dateForm.meeting_name=res.meeting_ru
					this.dateForm.meeting_value=res.meeting_ids
					this.meeting_checkedArr=res.meeting_arr&&res.meeting_arr.map((item)=>{
						if(this.lang=='zh')item.name=res.meeting
						if(this.lang=='ru')item.name=res.meeting_ru
						 return item
					})
					if(this.lang=='zh')this.dateForm.fessional_name=res.professional || ''
					if(this.lang=='ru')this.dateForm.fessional_name=res.professional_ru || ''
					this.dateForm.fessional_value=res.professional_ids || ''
					this.fessional_checkedArr=res.professional_arr.map((item)=>{
						if(this.lang=='zh')item.name=res.professional
						if(this.lang=='ru')item.name=res.professional_ru
						return item
					})
					if(this.lang=='zh')this.dateForm.city_name=res.city_arr?res.city_arr.mergename:''
					if(this.lang=='ru')this.dateForm.city_name=res.city_arr?res.city_arr.mergename_ru:''
					this.dateForm.city_value=res.city_id
					this.dateForm.bank_value=res.bank_number.trim()
					this.dateForm.order_taking=res.min_score&&res.max_score?(res.min_score+this.$t('积分/分钟')+'-'+res.max_score+this.$t('积分/分钟')):''
					this.dateForm.order_takingValue=res.intention_score || ''
					this.dateForm.bank_build=res.bank_build || ''
					this.dateForm.bank_city=res.bank_city || ''
					this.switchChecked=res.status=='1'?true:false
				})
			},
			//当前所在城市
			confirm(e){
				console.log('当前所在城市',e)
				if(e.length>0){
					this.dateForm.city_name=e.map((item)=>{return item.label}).join(',');
					this.dateForm.city_value=e[2].value
				}else{
					this.dateForm.city_name=''
					this.dateForm.city_value=''
				}
				
			},
			//接单时间
			timeChange(eventType,event,v_value,v_name){
				console.log('接单时间',eventType,event,v_value,v_name)
				this.dateForm[v_value]=event[0].value
				this.dateForm[v_name]=event[0].label
				
			},
			//语言，会议，专业选择
			fun_treeChange(v_style,e){
				console.log('对象选择列表',v_style,e);
				if(v_style=='meeting'){
					this.meeting_checkedArr=e;
					this.dateForm.meeting_name=e.map((item)=>{return item.name}).join(',');
					this.dateForm.meeting_value=e.map((item)=>{return item.id}).join(',');
					this.meeting_show=false;
				}
				if(v_style=='fessional'){
					this.fessional_checkedArr=e;
					this.dateForm.fessional_name=e.map((item)=>{return item.name}).join(',');
					this.dateForm.fessional_value=e.map((item)=>{return item.id}).join(',');
					this.fessional_show=false;
				}
				if(v_style=='language'){
					this.language_checkedArr=e;
					this.dateForm.language_name=e.map((item)=>{return item.label}).join(',');
					this.dateForm.language_value=e.map((item)=>{return item.value}).join(',');
					this.language_show=false;
				}
			},
			//会议
			meetingFunction(){
				this.$u.api.user.catesList({
					type:'meeting'
				}).then(res => {
					res.length>0&&res.map((item,index)=>{
						item.user=true
						if(this.lang=='ru')item.name=item.name_ru
						if(this.lang=='zh')item.name=item.name
						item.children=[]
					})
					this.meetingList=res
				})
			},
			//专业
			fessionalFunction(){
				this.$u.api.user.catesList({
					type:'professional'
				}).then(res => {
					res.length>0&&res.map((item,index)=>{
						item.user=true
						if(this.lang=='ru')item.name=item.name_ru
						if(this.lang=='zh')item.name=item.name
						item.children=[]
					})
					this.fessionalList=res
				})
			},
		}
	
	}
</script>

<style scoped>
	.reward_detail{
		background-image: url('/static/images/center/center_seting.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}
	.u-form-child-r-text-right .u-input{
		text-align: right!important;
	}
   /deep/.no-icon .u-input__right-icon{
		display: none!important
	}
	/deep/.u-form-item--left__content__label{
		color: #1D1D1D !important;
		font-size: 24rpx !important;
		font-weight: 400 !important;
	}
	/deep/.uni-input-input, .uni-input-placeholder{
		color:#999999 !important;
		font-size: 24rpx !important;
		font-weight: 300 !important;
	}
.reward_base{
		width: 32rpx;
		height: 32rpx;
	}
	.u-btn--primary{
		color: #ffffff;
		border-color: #5282E6;
		background-color: #5282E6;
	}
	/deep/ .u-border-bottom:after {
	    border-bottom-width: 0 !important;
	}
	/deep/.content{
      margin: 0
	}
	/deep/.container-list .common .content .lable-text{
	  font-size: 12px;	
	  width: 100%;
	}
	/deep/.u-navbar-content-title{
		width: 80% !important;
		left:10% !important;
		right:10% !important;
	}
	.subbox {
		background-image: linear-gradient(to bottom, #30F998, #0D7DE2);
		text-align: center;
		color: #ffffff;
	}
	/deep/.container-list{
		padding-top: 40rpx !important;
	}
</style>